<template>
	<view class="container">
		<view class="recharge-order">
			<scroll-view @scrolltolower="onPageDown" scroll-y :style="{ height: scrollHeight + 'px' }">
				<view v-for="(item, index) in list.data" :key="index" class="order-item dis-flex flex-x-between flex-y-center">
					<view class="item-left flex-box">
						<view class="rec-status">
							<text>{{ item.describe }}</text>
						</view>
						<view class="rec-time">
							<text>{{ item.create_time }}</text>
						</view>
					</view>
					<view :class="'item-right ' + (item.value > 0 ? 'col-green' : 'col-6')">
						<text>{{ item.value > 0 ? '+' : '' }}{{ item.value }}</text>
					</view>
				</view>
				<!-- 没有记录 -->
				<view class="yoshop-notcont" v-if="!list.data.length && !isLoading">
					<text class="iconfont icon-wushuju"></text>
					<text class="cont">亲，暂无账单明细哦</text>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			list: { data: [] }, // 充值记录
			isLoading: true, // 是否正在加载中
			page: 1, // 当前页码
			scrollHeight: null,
			no_more: false
		};
	},
	onLoad() {
		this.setListHeight();
	},
	onShow() {
		this.getPointsLog();
	},
	methods: {
		/**
		 * 获取积分明细列表
		 */
		getPointsLog(isPage, page) {
			this.$get(this.$api.getPointsLog, { page: page || 1 }, res => {
				let resList = res.data.list;
				let dataList = this.list;
				if (isPage == true) {
					this.$set(this.list, 'data', dataList.data.concat(resList.data));
					this.isLoading = false;
				} else {
					this.list = resList;
					this.isLoading = false;
				}
			});
		},
		/**
		 * 设置列表容器高度
		 */
		setListHeight() {
			const systemInfo = wx.getSystemInfoSync();
			this.scrollHeight = systemInfo.windowHeight * 0.98;
		},
		/**
		 * 下拉到底加载数据
		 */
		onPageDown() {
			// 已经是最后一页
			if (this.page >= this.list.last_page) {
				this.no_more = true;
				return false;
			}
			// 加载下一页列表
			this.getPointsLog(true, ++this.page);
		}
	}
};
</script>

<style>
page,
.container {
	background: #fff;
}

.recharge-order {
	padding: 0 30rpx;
}

.order-item {
	font-size: 28rpx;
	padding: 20rpx 20rpx;
	line-height: 1.8;
	border-bottom: 1rpx solid rgb(238, 238, 238);
}

.rec-status {
	color: #333;
}

.order-item .rec-time {
	color: rgb(160, 160, 160);
	font-size: 26rpx;
}
</style>
